/*!
 * @copyright 2009-2019 Vanilla Forums Inc.
 * @license GPL-2.0-only
 */

@use "sass:math";

$richEditor-videoPlayIcon_width: 80px !default;
$embedVideo_width: $embed_width;

// Video
.embedVideo {
    .embedExternal-content {
        position: relative;
        display: block;
        width: 100%;
        max-width: 100%;
        margin: auto;

        &:focus,
        &:hover {
            .embedVideo-playIcon {
                transform: scale(1.1);
            }
        }
    }
}

.richEditor {
    // No hover in edit mode
    .embedVideo {
        .embedExternal-content {
            &:focus,
            &:hover {
                .embedVideo-playIcon {
                    transform: scale(1);
                }
            }
        }
    }
}

.embedVideo-iframe,
.embedVideo-thumbnail {
    @include absolute-fullSizeOfParent;
}

.embedVideo-thumbnail {
    @include objectFitWithFallback;
    background-color: black;
}

.embedVideo-ratio {
    position: relative;
    display: block;
    background-color: #000000;
    margin: 0;
    width: 100%;
    padding: {
        left: 0;
        right: 0;
        bottom: 0;
    }

    &.is21by9 {
        padding-top: #{(math.div(9, 21) * 100%)};
    }

    &.is16by9 {
        padding-top: #{(math.div(9, 16) * 100%)};
    }

    &.is4by3 {
        padding-top: #{(3 * 0.25 * 100%)};
    }

    &.is1by1 {
        padding-top: 100%;
    }
}

.embedVideo-playButton {
    @include absolute-fullSizeOfParent;
    cursor: pointer;
    overflow: hidden;
    border: none;
}

.embedVideo-playIconWrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: $richEditor-videoPlayIcon_width;
    height: $richEditor-videoPlayIcon_width;
    $bg: rgba(#000, 0.4);
    display: block;
    background: linear-gradient(to bottom, $bg, $bg);
    border-radius: 50%;
}

.embedVideo-playIcon {
    color: white;
}

.embedVideo-playIconPath {
    stroke: rgba(0, 0, 0, 0.1);
}
